<template>
    <div class="page planLibraryDetails-page" data-page="planLibraryDetails" style="z-index: 2;">
        <div class="link-page-nav">
            <a href="#" class="link back" @click="$root.backToTab()">
                <i class="iconfont icon-zuo"></i>
            </a>
        </div>
        <div class="link-page-top" style="padding-bottom: 17px;">
            <div class="link-page-title">预案详情</div>
        </div>
        <div class="page-content emergencyPlanProse-page-content pdbottom100">
            <div class="plan-name" id="currentPlanName"></div>
            <div class="emergencyPlanProse">
                <div class="block-title"><i class="iconfont icon-youjiantoushixinxiao" style="font-size:36px;vertical-align: middle; margin-left:-10px"></i>
                    <span style="display:inline-block;vertical-align:middle;margin-left: -10px;">应急人员</span></div>
                <div class="emergencyPlanProse-content" id="planmember"></div>
                <div class="block-title "><i class="iconfont icon-youjiantoushixinxiao" style="font-size:36px;vertical-align: middle; margin-left:-10px"></i>
                    <span style="display:inline-block;vertical-align:middle;margin-left: -10px;">处置流程</span>
                </div>
                <div class="emergencyPlanProse-content" id="planProse"></div>
                <div class="block-title "><i class="iconfont icon-youjiantoushixinxiao" style="font-size:36px;vertical-align: middle; margin-left:-10px"></i>
                    <span style="display:inline-block;vertical-align:middle;margin-left: -10px;">小组分工</span></div>
                <div class="block-title block-titleClick" ><div style="width:6px;height: 6px;border-radius:50%;background:#4699FF;display: inline-block;vertical-align:middle;"></div><span style="display:inline-block;vertical-align:middle;"> 现场指挥小组分工 </span><i class="iconfont icon-xiala" style="float: right;color: #999999;"></i>   </div>
                <div class="emergencyPlanGroup-content" id="planGroup1"></div>
                <div class="block-title block-titleClick" ><div style="width:6px;height: 6px;border-radius:50%;background:#4699FF;display: inline-block;vertical-align:middle;"></div><span style="display:inline-block;vertical-align:middle;"> 信息传导小组分工</span><i class="iconfont icon-xiala" style="float: right;color: #999999;"></i></div>
                <div class="emergencyPlanGroup-content" id="planGroup2"></div>
                <div class="block-title block-titleClick" ><div style="width:6px;height: 6px;border-radius:50%;background:#4699FF;display: inline-block;vertical-align:middle;"></div><span style="display:inline-block;vertical-align:middle;"> 灭火战斗小组分工</span><i class="iconfont icon-xiala" style="float: right;color: #999999;"></i></div>
                <div class="emergencyPlanGroup-content" id="planGroup3"></div>

                <div class="block-title block-titleClick" ><div style="width:6px;height: 6px;border-radius:50%;background:#4699FF;display: inline-block;vertical-align:middle;"></div><span style="display:inline-block;vertical-align:middle;"> 引导疏散小组分工</span><i class="iconfont icon-xiala" style="float: right;color: #999999;"></i></div>
                <div class="emergencyPlanGroup-content" id="planGroup4"></div>
                <div class="block-title block-titleClick" ><div style="width:6px;height: 6px;border-radius:50%;background:#4699FF;display: inline-block;vertical-align:middle;"></div><span style="display:inline-block;vertical-align:middle;"> 安全警戒小组分工</span><i class="iconfont icon-xiala" style="float: right;color: #999999;"></i></div>
                <div class="emergencyPlanGroup-content" id="planGroup5"></div>
                <div class="block-title block-titleClick" ><div style="width:6px;height: 6px;border-radius:50%;background:#4699FF;display: inline-block;vertical-align:middle;"></div><span style="display:inline-block;vertical-align:middle;"> 后勤救护小组分工</span><i class="iconfont icon-xiala" style="float: right;color: #999999;"></i></div>
                <div class="emergencyPlanGroup-content" id="planGroup6"></div>
                 <div class="block-title block-titleClick" ><div style="width:6px;height: 6px;border-radius:50%;background:#4699FF;display: inline-block;vertical-align:middle;"></div><span style="display:inline-block;vertical-align:middle;"> 其他小组分工</span><i class="iconfont icon-xiala" style="float: right;color: #999999;"></i></div>
                <div class="emergencyPlanGroup-content" id="planGroup"></div>

            </div>
        </div>
    </div>
</template>
<script>
    return {
        mounted(){
            jQuery('.block-titleClick').click(function(){
                if(jQuery('i',this).hasClass('icon-xiala')){
                    jQuery('i',this).addClass('icon-shouqi').removeClass('icon-xiala')
                    jQuery(this).next('.emergencyPlanGroup-content').stop().slideDown()
                }else{
                    jQuery('i',this).removeClass('icon-shouqi').addClass('icon-xiala')
                    jQuery(this).next('.emergencyPlanGroup-content').stop().slideUp()
                }
            })
        },
        methods : {
           
        	selectEmergencyPlanDetail : function(planId) {
                    var self = this;
                    common.loading(1);
                    $("#planProse").empty();
                    $("#planGroup").empty();
                    $("#planGroup1").empty();
                    $("#planGroup2").empty();
                    $("#planGroup3").empty();
                    $("#planGroup4").empty();
                    $("#planGroup5").empty();
                    $("#planGroup6").empty();
                    Dao.selectEmergencyPlanDetail({
                         userName:userInfor.accountName,
                         deviceId:appKeyObj.deviceId,
                         planId:planId,
                    },function(data) {
                        common.loading(0);
                        if(data){
                            $("#currentPlanName").html(common.transNullundefined(data.name));
                            let flag=false
                            if(data.flowContent!=null &&data.flowContent!=""&&data.flowContent!=undefined){
                                $("#planProse").append(data.flowContent);
                            }else{
                                $("#planProse").append("-");
                            }
                            // 领导组分工
                            if(data.leaderTaskContent!=null &&data.leaderTaskContent!=""&&data.leaderTaskContent!=undefined){
                                $("#planGroup1").append(data.leaderTaskContent);
                                if(!flag) {
                                    $("#planGroup1").show();
                                    jQuery('#planGroup1').prev().find('i').removeClass('icon-xiala').addClass('icon-shouqi')
                                    flag = true
                                }
                            }else{
                                $("#planGroup1").hide()
                                $("#planGroup1").prev('.block-title').hide()
                            }
                            //传导组分工
                            if(data.conductionTaskContent!=null &&data.conductionTaskContent!=""&&data.conductionTaskContent!=undefined){
                                $("#planGroup2").append(data.conductionTaskContent);
                                if(!flag) {
                                    $("#planGroup2").show()
                                    jQuery('#planGroup2').prev().find('i').removeClass('icon-xiala').addClass('icon-shouqi')
                                    flag = true
                                }
                            }else{
                                $("#planGroup2").hide()
                                $("#planGroup2").prev('.block-title').hide()
                            }
                            //战斗组分工
                            if(data.battleTaskContent!=null &&data.battleTaskContent!=""&&data.battleTaskContent!=undefined){
                                $("#planGroup3").append(data.battleTaskContent);
                                if(!flag) {
                                    $("#planGroup3").show()
                                    jQuery('#planGroup3').prev().find('i').removeClass('icon-xiala').addClass('icon-shouqi')
                                    flag = true
                                }
                            }else{
                                $("#planGroup3").hide()
                                $("#planGroup3").prev('.block-title').hide()
                            }
                            //疏散组分工
                            if(data.evacuateTaskContent!=null &&data.evacuateTaskContent!=""&&data.evacuateTaskContent!=undefined){
                                $("#planGroup4").append(data.evacuateTaskContent);
                                if(!flag) {
                                    $("#planGroup4").show()
                                    jQuery('#planGroup4').prev().find('i').removeClass('icon-xiala').addClass('icon-shouqi')
                                    flag = true
                                }
                            }else{
                                $("#planGroup4").hide()
                                $("#planGroup4").prev('.block-title').hide()
                            }
                            //安全警戒组分工
                            if(data.safetyalertTaskContent!=null &&data.safetyalertTaskContent!=""&&data.safetyalertTaskContent!=undefined){
                                $("#planGroup5").append(data.safetyalertTaskContent);
                                if(!flag) {
                                    $("#planGroup5").show()
                                    jQuery('#planGroup5').prev().find('i').removeClass('icon-xiala').addClass('icon-shouqi')
                                    flag = true
                                }
                            }else{
                                $("#planGroup5").hide()
                                $("#planGroup5").prev('.block-title').hide()
                            }
                            //后勤组分工
                            if(data.logisticsTaskContent!=null &&data.logisticsTaskContent!=""&&data.logisticsTaskContent!=undefined){
                                $("#planGroup6").append(data.logisticsTaskContent);
                                if(!flag) {
                                    $("#planGroup6").show()
                                    jQuery('#planGroup6').prev().find('i').removeClass('icon-xiala').addClass('icon-shouqi')
                                    flag = true
                                }
                            }else{
                                $("#planGroup6").hide()
                                $("#planGroup6").prev('.block-title').hide()
                            }
                            if(data.taskContent!=null &&data.taskContent!=""&&data.taskContent!=undefined){
                                $("#planGroup").append(data.taskContent);
                                if(!flag) {
                                    $("#planGroup").show()
                                    jQuery('#planGroup').prev().find('i').removeClass('icon-xiala').addClass('icon-shouqi')
                                    flag = true
                                }
                            }else{
                                $("#planGroup").prev('.block-title').hide()
                                $("#planGroup").hide()
                            }
                            var peoDatalist=data.members;  
                            $("#planmember").empty();
                            if(peoDatalist && peoDatalist.length > 0){
                                for(var n=0; n< peoDatalist.length;n++){ 
                                    $("#planmember").append(`
                                        <div class="row" style="padding-left: 10px;">
                                            <div class="gropList col-40">`+common.transNullundefined(peoDatalist[n].groupName)+`</div>
                                            <div class="gropList col-25">`+common.transNullundefined(peoDatalist[n].dutyName)+`</div>
                                            <div class="gropList col-35" ><a 
                                        href="tel:`+common.transNullundefined(peoDatalist[n].tel)+`" onclick="window.location='tel:`+common.transNullundefined(peoDatalist[n].tel)+`'">`+common.transNullundefined(peoDatalist[n].tel)+`</a></div>
                                        </div>
                                    `);
                                }
                            } else{
                                $("#planmember").append("-");
                            }

                            jQuery(".emergencyPlanProse img").click(function(e){
                                openAndShowBigImage([e.currentTarget.src],0);
                            })

                        }else{
                            $("#planProse").append("-");
                            $("#planGroup").append("-");
                            $("#planmember").append("-");
                        }
                    },function(e) {
                          common.loading(0);
                          app.methods.showToastBottom('获取预案信息列表失败');
                    }); 
            },
        },
        on:{
            pageInit: function(e, page) {
                var self = this;
                self.selectEmergencyPlanDetail(this.$route.params.id);
            }
        },
    }
</script>

<style scoped>
    .emergencyPlanGroup-content{
        display: none;
    }
    #planmember .row {
        width: 100%;
        font-size: 14px;
        padding-left: 16px;
        padding-right: 16px;
        margin-bottom: 5px;
    }
    .emergencyPlanProse{
        padding: 5px 0px;
        margin-bottom: 15px;
        margin-top: -25px;
    }
    .emergencyPlanProse-content,.emergencyPlanGroup-content{
        margin-top: 5px;
        font-size: 14px;
        padding: 20px;
        padding-top: 0px;
    }
    .emergencyPlanProse-content img{
        width: 100%;
    }
    .emergencyPlanGroup-content img{
        width: 100%;
        /* height: 250px; */
    }
    .gropList{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .emergencyPlan-row{
        color: #333 !important;
        width: 100%;
        font-size: 14px;
        padding-left: 16px;
        padding-right: 16px;
        margin-bottom: 5px;
    }
</style>